<script>
export default goods;
import goods from "./index";
</script>
<!--src 引用css样式-->
<style src="./index.css" lang="css"></style>

<template>
  <div class="brand-wrapper">
    <!--搜索功能-->
    <div class="search-form">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="存货档案编码" size="mini">
          <el-input placeholder="存货档案编码" v-model="searchParams.goodsId"></el-input>
        </el-form-item>
        <el-form-item label="基础库-型号" size="mini">
          <el-input placeholder="基础库-型号" v-model="searchParams.modelId"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="基础库-品牌" size="mini">
          <el-select  v-model="searchParams.brandId" placeholder="商品品牌" size="mini" >
            <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :label="item.brandName"
                    :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="基础库-类别" size="mini">-->
<!--          <el-select  v-model="searchParams.typeId" placeholder="商品类型" size="mini" >-->
<!--            <el-option-->
<!--                    v-for="item in typeList"-->
<!--                    :key="item.id"-->
<!--                    :label="item.typeName"-->
<!--                    :value="item.id"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="基础库-类别" size="mini">
          <el-cascader
              v-model="searchParams.typeId"
              :options="type_options"
              :props="{ checkStrictly: true }"
              @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="基础库-颜色" size="mini">
          <el-select v-model="searchParams.colourId" placeholder="商品颜色" size="mini">
            <el-option
                    v-for="item in colourList"
                    :key="item.id"
                    :label="item.colourName"
                    :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>


        <el-button type="primary" size="mini" @click="searchPage">查询</el-button>
        <el-button type="warning" size="mini" @click="resetForm">重置</el-button>
      </el-form>
    </div>


    <!--table表格-->
    <div class="table-box">

      <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="selectChange">
        <el-table-column
            prop="id"
            label="序号"
            width="180" align="center">
        </el-table-column>
        <el-table-column
                type="selection"
                width="55" align="center">
        </el-table-column>
        <el-table-column
            prop="goodsId"
            label="存货档案编码"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="typeName"
            label="商品分类"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="brandName"
            label="商品品牌"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="modelId"
            label="商品型号"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="colourName"
            label="商品颜色"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="basicsPurchase"
            label="采购方式"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="basicsDistribution"
            label="是否铺货"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="basicsStandbyMachine"
            label="是否备机"
            width="180" align="center">
        </el-table-column>

        <!--<el-table-column-->
            <!--prop="address"-->
            <!--label="操作" align="center">-->

          <!--<template v-slot="obj">-->
            <!--<el-button type="primary"-->
                       <!--@click="dialogFormVisible=true,formData.id=obj.row.id,findById(obj.row)"-->
                       <!--style="margin-right: 5px"-->
            <!--&gt;请选择</el-button>-->
          <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
    </div>
    <!--分页-->
    <div class="page-box">
      <el-pagination
          background
          layout="prev, pager, next"
          :current-page="this.searchParams.currentPage"
          :page-size="this.searchParams.pageSize"
          @current-change="currentPageChange"
          :total="total" align="right">
      </el-pagination>
    </div>

    <!-- 弹框dialog-->
    <div class="dialog-box">
      <el-dialog title="新建" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="formData" label-width="80px">
          <el-form-item label="商品品牌" size="mini">
            <el-select  v-model="formData.brandId" placeholder="商品品牌" size="mini" :disabled=true>
              <el-option
                      v-for="item in brandList"
                      :key="item.id"
                      :label="item.brandName"
                      :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品型号" size="mini">
            <el-input autocomplete="off" v-model="formData.modelId" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="商品颜色" size="mini">
            <el-select v-model="formData.colourId" placeholder="商品颜色" size="mini" :disabled=true>
              <el-option
                      v-for="item in colourList"
                      :key="item.id"
                      :label="item.colourName"
                      :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品类别" size="mini">
            <el-select  v-model="formData.typeId" placeholder="商品类别" size="mini" :disabled=true>
              <el-option
                      v-for="item in typeList"
                      :key="item.id"
                      :label="item.typeName"
                      :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采购方式" size="mini">
            <el-input autocomplete="off" v-model="formData.basicsPurchase" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="是否铺货" size="mini">
            <el-input autocomplete="off" v-model="formData.basicsDistribution" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="是否备机" size="mini">
            <el-input autocomplete="off" v-model="formData.basicsStandbyMachine" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="商品名称" size="mini">
            <el-input autocomplete="off" v-model="formData.goodsName" ></el-input>
          </el-form-item>

          <el-form-item label="市场价" size="mini">
            <el-input autocomplete="off" v-model="formData.salePrice"></el-input>
          </el-form-item>
          <el-form-item label="商城价" size="mini">
            <el-input autocomplete="off" v-model="formData.mallPrice"></el-input>
          </el-form-item>
          <el-form-item label="能否采购" prop="delivery">
            <el-switch v-model="formData.purchasable"></el-switch>
          </el-form-item>
          <el-form-item label="最低库存量" size="mini">
            <el-input autocomplete="off" v-model="formData.minimumStock"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false,save()" size="mini">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>
